<template>
  <div class="not-settled">
    <p class="title">该企业暂未完成找包装认证！</p>
    <div class="btns">
      <m-button width="134" style="margin-right: 15px;" @click="claim">
        <div style="display: flex; align-items: center;">
          <img src="~/assets/images/notsettled-claim.png" alt="" style="margin-right: 5px;">
          认领该企业
        </div>
      </m-button>
      <m-button width="134" @click="() => showDialogInvite = true">邀请入驻</m-button>
    </div>
    <div class="info">
      <div class="brief">
        <p class="title">企业简介</p>
        <div class="pic-and-intro">
          <img :src="companyInfo.mer_avatar" alt="" class="pic">
          <div class="intro">
            <div class="text">
              {{ companyInfo.about }}
            </div>
            <!-- <div class="more">了解更多<i class="el-icon-arrow-right"></i></div> -->
          </div>
        </div>
      </div>
      <!-- //todo -->
      <div class="connect">
        <div class="person">联系人：{{ companyInfo.company_staff_name }}</div>
        <div class="position">公司职位：{{ companyInfo.company_staff_position }}</div>
        <div class="mobile">电话：{{ companyInfo.mer_phone }}</div>
        <div class="email">邮箱：{{ companyInfo.company_email }}</div>
        <div class="address">地址：{{ companyInfo.address }}</div>
      </div>
    </div>
    <div class="notice">
      此信息来源于网络公开渠道，如有侵犯，
      <div class="keywords">
        <img src="~/assets/images/notsettled-connect.png" alt="">
        请联系平台删除。
      </div>
    </div>
    <!-- 认领该企业 -->
    <m-dialog :show-dialog.sync="showDialog" title="平台提示" class="dialog">
      <p class="title">请务必填写您的联系方式</p>
      <m-form ref="form" :model="formData" :rules="rules" label-width="105px" label-position="left">
        <m-form-item prop="name" label="姓名：">
          <div class="input-wrap">
            <m-input v-model="formData.name"/>
          </div>
        </m-form-item>
        <m-form-item prop="company" label="公司：">
          <div class="input-wrap">
            <m-input v-model="formData.company"/>
          </div>
        </m-form-item>
        <m-form-item prop="position" label="职位：">
          <div class="input-wrap">
            <m-input v-model="formData.position"/>
          </div>
        </m-form-item>
        <m-form-item prop="email" label="邮箱：">
          <div class="input-wrap">
            <m-input v-model="formData.email"/>
          </div>
        </m-form-item>
        <m-form-item prop="phone" label="电话：">
          <div class="input-wrap">
            <m-input v-model="formData.phone"/>
          </div>
        </m-form-item>
        <m-form-item prop="reason" label="删除原因：">
          <div class="input-wrap">
            <m-input type="textarea" v-model="formData.reason" :autosize="{ minRows: 4 }"/>
          </div>
        </m-form-item>
        <m-form-item style="margin-top: 60px;">
          <m-button width="230" @click="submit">提交</m-button>
        </m-form-item>
      </m-form>
    </m-dialog>
    <!-- 邀请入驻 -->
    <m-dialog class="dialog" :show-dialog.sync="showDialogInvite" title="邀请入驻">
      <m-form :model="inviteFormData" label-width="130px" label-position="right">
        <m-form-item label="受邀人邮箱：" required>
          <m-input v-model="inviteFormData.email" placeholder="请输入邀请企业邮箱地址" />
        </m-form-item>
        <m-form-item label="邀请内容：" required>
          <m-input
            v-model="inviteFormData.content"
            type="textarea"
            placeholder="请输入邀请内容详情"
            :rows="3"
          />
        </m-form-item>
      </m-form>
      <div class="btns">
        <m-button type="dark" width="180" @click="() => showDialogInvite = false">取消</m-button>
        <m-button width="180" @click="inviteConfirm">确定</m-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import MButton from '@/components/common/m-button/MButton'
import MDialog from '@/components/common/m-dialog/MDialog'
import MForm from '@/components/common/m-form/MForm'
import MFormItem from '@/components/common/m-form/MFormItem'
import MInput from '@/components/common/m-input/MInput'
import { getMerchantDe, inviteMerchant } from '@/request/api'
import { Icon, Message } from 'element-ui'
import Vue from 'vue'
Vue.use(Icon)

export default {
  name: 'NotSettled',
  components: { MInput, MFormItem, MForm, MDialog, MButton },
  data() {
    return {
      showDialog: false,
      formData: {},
      rules: {
        name: [
          { required: true, message: '请输入完整', trigger: 'blur' }
        ],
        company: [
          { required: true, message: '请输入完整', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入完整', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入完整', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入完整', trigger: 'blur' }
        ]
      },
      companyInfo: {},
      showDialogInvite: false,
      inviteFormData:{}
    }
  },
  mounted(){
    this.getDetailData()
  },
  methods: {
    // 认领该企业
    claim() {
      this.showDialog = true
    },
    // 获取未入驻企业详情
    getDetailData() {
      getMerchantDe(this.$route.params.id).then( res => {
        this.companyInfo = res.data
      }).catch( () => {
        this.$message.error('该企业暂未入驻')
      })
    },
    inviteConfirm() {
      inviteMerchant({ ...this.inviteFormData, id: this.$route.params.id }).then(res => {
        if(res.status === 200) {
          Message.success("邀请成功!")
          this.showDialogInvite = false
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // TODO: 差接口
    submit() {
      Message.error('没接口')
      /* this.$refs.form.$refs.mForm.validate(res => {
        console.log(res)
      }) */
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

/deep/ .el-dialog__wrapper {
  z-index: 9999 !important;
}
.not-settled {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  > .title {
    font-size: 20px;
    color: #666;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .btns {
    display: flex;
    margin-bottom: 25px;
  }

  .info {
    width: 1200px;
    height: 300px;
    background-color: #fff;
    padding: 25px;
    display: flex;
    align-items: center;
    margin-bottom: 50px;

    .brief {
      width: 55%;
      height: 100%;
      border-right: solid 1px #eaeaea;

      .title {
        font-size: 18px;
        margin-bottom: 15px;
      }

      .pic-and-intro {
        display: flex;
        align-items: center;
        padding-bottom: 30px;

        .pic {
          width: 317px;
          height: 181px;
          margin-right: 30px;
        }

        .intro {
          width: calc(80% - 317px);
          height: 181px;
          position: relative;

          .text {
            @include text-omitted(4);
            margin-top: 30px;
            font-size: 16px;
            line-height: 22px;
            color: #666;
          }

          .more {
            font-size: 16px;
            color: $theme-color-1;
            cursor: pointer;
            position: absolute;
            bottom: 15px;
            left: 0;
          }
        }
      }
    }

    .connect {
      padding-left: 70px;
      font-size: 16px;
      color: #666;

      div {
        margin-bottom: 10px;
      }
    }
  }

  .notice {
    display: flex;
    color: #666;
    font-size: 16px;

    .keywords {
      color: $theme-color-1;
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        margin-right: 5px;
      }
    }
  }

  .dialog {
    .title {
      margin-bottom: 30px;
      font-size: 18px;
    }
    .btns {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
    }
  }
}
</style>
